import BaseComponent from "../../app/baseComponent";
import { createSubpageComponent } from "../page.component";
import Popper from "popper.js";
import Tooltip from "tooltip.js";

class UiExamplePopover extends BaseComponent {
    constructor(name) {
        super(name);
    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
        <div style="margin: 140px;">
            <button class="my-button" type="button">sdsds</button>
        
                <div class="my-popper">my popover</div>
        </div>
</div>`;
    }
    _mounted() {
        var self = this;

        // console.dir(Popper);        
        var reference = document.querySelector('.my-button');
        // var popper = document.querySelector('.my-popper');
        // var anotherPopper = new Popper(
        //     reference,
        //     popper,
        //     {
        //         placement: 'right'
        //     }
        // );     
        // console.dir(anotherPopper);

        var anotherTooltip = new Tooltip(reference, {
            placement: 'top',
            title: "top"
        });

    }
    _data() {
        var ret = {};
        return ret;
    }
}

window.AUICustomComponents.define("ui-example-popover", UiExamplePopover);

export default createSubpageComponent(
    `<ui-example-popover></ui-example-popover>`
);